<?php
//当前地址
$changePosUrl = $_SERVER['PHP_SELF'];

//POST提交
if($_SERVER['REQUEST_METHOD'] == 'POST') {
	$longitude = isset($_REQUEST['longitude']) ? $_REQUEST['longitude'] : '';
	$latitude = isset($_REQUEST['latitude']) ? $_REQUEST['latitude'] : '';
	$data = changePosition($longitude, $latitude);
	echo(json_encode($data));
	exit();
}

/**
 * 火星坐标系 (GCJ-02) 转化到 百度坐标系 (BD-09)
 */	
function changePosition($geo_lng, $geo_lat){
	$url = "http://api.map.baidu.com/ag/coord/convert?from=0&to=4&mode=1&x=".$geo_lng."&y=".$geo_lat;
	$file = file_get_contents($url,500);
	$rel = json_decode($file,true);
	$lng=base64_decode($rel[0]['x']);
	$lat=base64_decode($rel[0]['y']);
	if((int)$lng ==0 && (int) $lat ==0){
		return array('code'=>1);
	}else{
		$url = "http://api.map.baidu.com/geocoder?location=".$lat.",".$lng."&output=json&key=28bcdd84fae25699606ffad27f8da77b";
		$file = file_get_contents($url,500);
		$rel = json_decode($file,true);
		$city_name = '';
		if($rel && $rel['status']=='OK') {
			$city_name = $rel['result']['addressComponent']['city'];
		}
		return array('code'=>0,'data'=>array('longitude'=>$lng,'latitude'=>$lat,'city_name'=>$city_name));
	}
}
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5获取经纬度 - demo</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style>
* {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline
}
body {
	line-height: 1;
	background-color: #f5f5f5
}
ol, ul {
	list-style: none
}
.layout_640 {
	max-width: 640px;
	min-width: 300px;
	margin: 0 auto
}
.header {
	height: 45px;
	background: url(statics/Img/header-bg.png);
	background-size: 100% 44px;
	border-bottom: 1px solid #ccc;
	position: relative
}
.icon_back,.icon_menu, .icon_home {
	width: 40px;
	height: 34px;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	display: block;
	background: url(statics/Img/icons1.png) no-repeat;
	background-size: 200px 200px;
	position: absolute;
	top: 5px
}
.icon_back {
	left: 5px;
	background-position: -112px -117px
}
.icon_menu {
	right: 5px;
	background-position: -114px -157px;
	cursor: pointer
}
.icon_home {
	left: 5px;
	background-position: -150px -115px
}
.header h1 {
	text-align: center;
	line-height: 45px;
	font-size: 18px;
	font-weight: bold;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: 0 50px
}
.header .menu_list {
	position: absolute;
	right: 1px;
	top: 46px;
	width: 120px;
	background: #FFF;
	display: none;
	z-index: 101;
	border-top: 0;
	box-shadow: 0 1px 1px #666
}
.header .menu_list a {
	font-size: 14px;
	display: block;
	color: #666;
	line-height: 30px;
	padding: 0 15px;
	border-bottom: 1px solid #c7d0d2;
	text-decoration: none
}
.header .menu_list a:last-child {
	border-bottom: 0
}
.qrcodeBox {
	position: fixed;
	z-index: 1;
	width: 132px;
	left: 20px;
	top: 50%;
	text-align: center;
	margin-top: -50px;
	font-size: 12px;
	line-height: 18px
}
.qrcodeBox i {
	color: #f00
}
#qrcodePic {
	border: 5px solid #FFF;
	width: 99px;
	-webkit-box-shadow: 2px 2px 2px;
	-moz-box-shadow: 2px 2px 2px;
	box-shadow: 2px 2px 2px;
	margin: 0 auto 6px auto
}
</style>
<script type="text/javascript" src="statics/Js/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="layout_640">

<div class="header">
    <a class="icon_back" href="#"></a>
<h1>请用手机扫描二维码打开</h1>
<span class="icon_menu" onclick="$('.menu_list').slideToggle();"></span>
<div class="menu_list">
<a href="#">返回首页</a>
<a href="#">问题反馈</a>
<a href="#">联系我们</a>
</div>
</div>

<!-- geo -->
<script> var changePosUrl = '<?php echo $changePosUrl;?>'; </script>
<script src="statics/Js/geo.js"></script>
<script type="text/javascript">
//获取经纬度（火星坐标）
//geoLocation();

//获取经纬度（火星坐标）
geoLocation(function(longitude, latitude) {
	alert('火星坐标： '+longitude+', '+latitude);
});

//获取经纬度（百度坐标）
geoLocation(function(longitude, latitude) {
	alert('百度坐标： '+longitude+', '+latitude);
}, 'baidu');
</script>

<!-- qrcode -->
<div class="qrcodeBox" style="display: none"><div id="qrcodePic"></div><i>扫描二维码，用手机浏览</i></div>
<script type="text/javascript" src="statics/Js/jquery.qrcode.js" ></script>
<script type="text/javascript">
jQuery(function(){
	//手机浏览器，自动隐藏
    if (navigator.userAgent.match(/(iPhone|iPod|Android|ios|SymbianOS)/i)) {
		jQuery('.qrcodeBox').css('display', 'none');
    }
	//PC访问，正常显示
	else {
		jQuery('.qrcodeBox').css('display', 'block');
		var qrcodeUrl = window.location.href.split('#')[0];
		if (qrcodeUrl.indexOf('?') != qrcodeUrl.lastIndexOf('?')) qrcodeUrl = qrcodeUrl.substring(0, qrcodeUrl.lastIndexOf('?'));
		jQuery('#qrcodePic').qrcode({
			render: "table",
			text: qrcodeUrl,
			width: "99",
			height: "99",
			correctLevel: 0
		});
	}
});
</script>
</div>
</body>
</html>